<template>
  <div class="component-usage">
    <h2>地区组件使用示例</h2>

    <!-- 静态导入的组件 -->
    <div class="static-component">
      <h3>静态导入组件</h3>
      <StaticComponent />
    </div>

    <!-- 动态导入的组件 -->
    <div class="dynamic-component">
      <h3>动态导入组件</h3>
      <component
        :is="dynamicComponent"
        v-if="dynamicComponent && !dynamicLoading"
      />
      <div v-else-if="dynamicLoading" class="loading">⏳ 加载中...</div>
      <div v-else-if="dynamicError" class="error">
        ❌ 加载失败: {{ dynamicError }}
      </div>
    </div>

    <!-- 条件导入的组件 -->
    <div class="conditional-component">
      <h3>条件导入组件</h3>
      <component
        :is="conditionalComponent"
        v-if="conditionalComponent && !conditionalLoading"
      />
      <div v-else-if="conditionalLoading" class="loading">⏳ 加载中...</div>
      <div v-else-if="conditionalError" class="error">
        ❌ 加载失败: {{ conditionalError }}
        <button @click="loadConditionalComponent" class="retry-btn">
          重试
        </button>
      </div>
      <button
        @click="loadConditionalComponent"
        v-else
        :disabled="conditionalLoading"
      >
        {{ conditionalLoading ? "加载中..." : "加载条件组件" }}
      </button>
    </div>

    <!-- 异步组件示例 -->
    <div class="async-component">
      <h3>异步组件 (defineAsyncComponent)</h3>
      <Suspense>
        <template #default>
          <AsyncRegionComponent />
        </template>
        <template #fallback>
          <div class="loading">⏳ 异步组件加载中...</div>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineAsyncComponent } from "vue";

// 静态导入 - vite 插件会自动将 cn 替换为当前地区
import StaticComponent from "@/components/cn/index.vue";

// 异步组件 - vite 插件会自动将 cn 替换为当前地区
const AsyncRegionComponent = defineAsyncComponent(() =>
  import("@/components/cn/index.vue")
);

// 响应式数据
const dynamicComponent = ref(null);
const conditionalComponent = ref(null);
const dynamicLoading = ref(true);
const dynamicError = ref(null);
const conditionalLoading = ref(false);
const conditionalError = ref(null);

// 动态导入组件 - vite 插件会自动将 cn 替换为当前地区
onMounted(async () => {
  try {
    dynamicLoading.value = true;
    const module = await import("@/components/cn/index.vue");
    dynamicComponent.value = module.default;
    dynamicError.value = null;
  } catch (error) {
    console.error("动态导入组件失败:", error);
    dynamicError.value = error.message;
  } finally {
    dynamicLoading.value = false;
  }
});

// 条件导入组件方法 - vite 插件会自动将 cn 替换为当前地区
const loadConditionalComponent = async () => {
  try {
    conditionalLoading.value = true;
    conditionalError.value = null;
    const module = await import("@/components/cn/index.vue");
    conditionalComponent.value = module.default;
  } catch (error) {
    console.error("条件导入组件失败:", error);
    conditionalError.value = error.message;
  } finally {
    conditionalLoading.value = false;
  }
};
</script>

<style scoped>
.component-usage {
  padding: 20px;
}

.static-component,
.dynamic-component,
.conditional-component,
.async-component {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

h3 {
  margin-top: 0;
  color: #333;
}

button {
  padding: 8px 16px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover:not(:disabled) {
  background: #0056b3;
  transform: translateY(-1px);
}

button:disabled {
  background: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

.loading {
  padding: 15px;
  text-align: center;
  color: #007bff;
  font-weight: 500;
  background: #f8f9ff;
  border: 1px solid #e3e7ff;
  border-radius: 4px;
  animation: pulse 1.5s ease-in-out infinite alternate;
}

.error {
  padding: 15px;
  color: #dc3545;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 4px;
  margin-bottom: 10px;
}

.retry-btn {
  background: #dc3545;
  margin-top: 10px;
  font-size: 12px;
  padding: 6px 12px;
}

.retry-btn:hover {
  background: #c82333;
}

@keyframes pulse {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
</style>
